<template>
  <div class="chart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PercentageView",
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      //初始化图表
      this.chart = echarts.init(this.$el);
      //设置图表
      this.chart.setOption({
        tooltip: {
          trigger: "item",
        },
        graphic: {
          elements: [
            {
              type: "text",
              left: "center",
              top: "42%",
              style: {
                text: "事件总数",
                textAlign: "center",
                fill: "#4E5969",
                fontSize: 14,
              },
            },
            {
              type: "text",
              left: "center",
              top: "52%",
              style: {
                text: "30",
                textAlign: "center",
                fill: "#1D2129",
                fontSize: 16,
                fontWeight: 500,
              },
            },
          ],
        },
        legend: {
          left: "center",
          data: ["未处理", "处理中", "已处理"],
          bottom: 0,
          icon: "circle",
          itemWidth: 8,
          textStyle: {
            color: "#4E5969",
          },
          itemStyle: {
            borderWidth: 0,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            label: {
              formatter: "{d}%",
              fontSize: 14,
              color: "#4E5969",
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            data: [
              {
                value: [148564],
                name: "未处理",
                itemStyle: {
                  color: "#249EFF",
                },
              },
              {
                value: [334271],
                name: "处理中",
                itemStyle: {
                  color: "#313CA9",
                },
              },
              {
                value: [445694],
                name: "已处理",
                itemStyle: {
                  color: "#21CCFF",
                },
              },
            ],
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.chart {
  width: 400px;
  height: 350px;
}
</style>
